<template>
	<view class="container">
		<view class="content">
			<view class="">
				<uni-forms ref="customForm" :rules="data.rules" :modelValue="data.form" label-position="top">
					<uni-forms-item label="原电话号码" required >
						<view class="mobile" style="display: flex;justify-content: space-between;">
							{{data.userInfo.mobile}}
							<view class="time" @click="getcode(data.userInfo.mobile,0)">
								{{time}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="原电话验证码" required name="msg">
						<uni-easyinput type="number" maxlength="6" v-model="data.form.msg" placeholder="请输入原电话验证码" />
					</uni-forms-item>
					<uni-forms-item label="新电话号码" required name="mobile" >
						<view class="" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="">
								<uni-easyinput type="number" maxlength="11" style="width: 50vw;" v-model="data.form.mobile" placeholder="请输入新电话号码" />
							</view>
							<view class="time" @click="getcode(data.form.mobile,1)">
								{{times}}
							</view>
						</view>
						
					</uni-forms-item>
					<uni-forms-item label="新电话验证码" required name="new_msg">
						<uni-easyinput type="number" maxlength="6" v-model="data.form.new_msg" placeholder="请输入新电话验证码" />
					</uni-forms-item>
					<uni-forms-item label="重置密码" required name="password">
						<uni-easyinput v-model="data.form.password" type="password" placeholder="请输入重置密码" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="btn"  @click="submit()">
			修改手机号
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom,onReady} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		status:1,
		userInfo:{},
		form:{
			msg:'',
			mobile:'',
			new_msg:'',
			password:''
		},
		// 校验规则
		rules: {
			msg: {
				rules: [{
					required: true,
					errorMessage: '原短信验证码不能为空'
				}]
			},
			mobile: {
				rules: [{
					required: true,
					errorMessage: '新电话不能为空'
				}]
			},
			new_msg: {
				rules: [{
					required: true,
					errorMessage: '新电话验证码不能为空'
				}]
			},
			password: {
				rules: [{
					required: true,
					errorMessage: '密码不能为空'
				}]
			}
		},
	})
	
	let time =ref('获取验证码')
	let times =ref('获取验证码')
	let customForm=ref()
	onLoad((option)=>{
		// getrealName()
		data.userInfo=uni.getStorageSync('userInfo')
	})
	onReady(()=>{
		// 设置自定义表单校验规则，必须在节点渲染完毕后执行
		customForm.value.setRules(data.rules)
	}) 

	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function getcode(mobile,code){
		if (!(/^1[3456789]\d{9}$/).test(mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}
			proxy.$request({
				url: `api/smscodesview/`,
				method:'post',
				data:{mobile:mobile} ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0){
						let times=60
						let timer=setInterval(function(){
							if(times==0){
								if(code==0){
									time.value='获取验证码'
								}else{
									times.value='获取验证码'
								}
								
								clearInterval(timer)
							}else{
								times--
								if(code==0){
									time.value='还有'+times+'秒'
								}else{
									times.value='还有'+times+'秒'
								}
								
							}
						},1000)
					}
				}
			})
		}
function submit() {
	customForm.value.validate().then(res => {
		proxy.$request({
			url: `api/modify_mobile/`,
			method: 'POST',
			data:data.form,
			success(res) {
				console.log(res)
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					uni.setStorageSync('userInfo',res.data)
				}
			}
		})
	}).catch(err => {
		console.log('err', err);
	})
}
	
	function getrealName (){
		proxy.$request({
			url: `api/realName/`,
			method: 'get',
			success(res) {
				data.status=res.errno
				if(res.errno==0){
					data.form.name=res.data.name
					data.form.card=res.data.card

				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.content{
			padding: 30upx;
			background-color: #fff;
			border-radius: 30upx;
		}
		.btn{
			background-color: $color1;
			color: #fff;
			text-align: center;
			padding: 20upx 0;
			font-size: 16px;
			margin-top: 30upx;
			font-weight: bold;
			border-radius: 40upx;
		}
		.btns{
			background-color: #ccc;
			color: #fff;
		}
	}
	.time{
		font-size: 12px;
	}
	::v-deep .uni-forms-item__label{
		width: 150px !important;
	}
</style>
